<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="index.html.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./dygraph-combined.js"></script>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  ga('create', 'UA-40786629-1', 'bg4systems.com');
  ga('send', 'pageview');

</script>
<script >
function getsock(){	
	var strDATA;
	var strDATA2;
	var spROW="<br>";
	var spCH=',';
	var iROW,iCH;
	var rowMAX=-1;
	var chMAX=-1;
	if (window.XMLHttpRequest){
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	}else{
		// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function(){
		if (xmlhttp.readyState==4 && xmlhttp.status==200){
			//document.getElementById("dd").innerHTML=xmlhttp.responseText;
			//strDATA=strDATA + xmlhttp.responseText;
			strDATA= xmlhttp.responseText;
			//alert(strDATA.length);
			//alert(strDATA);
			if (strDATA.length >0) {			
				//alert(strDATA);
				var row = strDATA.split(spROW); //split row
				//alert(row.length);  //row count
				//alert(row);
				//alert(String(row[0]));
				//alert(String(row[30]));

				var ch=row[1].split(spCH); //get channel
				//alert(ch.length); // ch = col.length - 2(index,datetime) 
				
				rowMAX = row.length-1; // ลบ ending 1 row
				//-- debug
				//alert(String(rowMAX)); 
				//if(row[rowMAX-1]==""){
				//	alert(" no data ");
				//}else{
				//	alert(row[rowMAX-1]);
				//}
				
				chMAX = ch.length-2; // ลบ CMD,Length,DateTime
			
			//	rowMAX = 3; // ลบ header 1 row 
				chMAX = 3; // ลบ CMD,Length,DateTime

				//alert("row:"+String(rowMAX) + " col:" + String(chMAX));
				if(rowMAX<=0){
					alert("!ไม่พบข้อมูล ROW");
				}
				if(chMAX<=0){
					alert("!ไม่พบข้อมูล CH");
				}
				var myDATA = new Array(rowMAX);
				//alert(myDATA.length); //show count Row
				//myDATA[0] = new Array(colMAX);
				//alert("Start add data");
				strDATA="";
				for(iROW=0;iROW<rowMAX;iROW++){
					myDATA[iROW]=new Array(chMAX);
					strDATA2=row[iROW].split(spCH); // split Column
					//alert(strDATA2);
					
					for(iCH=0;iCH<chMAX;iCH++){
						myDATA[iROW,iCH]=strDATA2[iCH+2];
						//--- debug ---
						//if(iROW==rowMAX-1){
						//	alert("row:"+String(iROW) + " col:" + String(iCH) +" "+ String(myDATA[iROW,iCH]));
						//}
						//  0: CDM
						//	1: timeindex
						//	2: datetime
						//	3: ch 1   // start data
						//alert(String(strDATA2[0]) + "  " + String(strDATA2[1]) + "  " +String(strDATA2[2]) + "  ");
						if(iCH==0){
							if(iROW==0){
								//strDATA=String(myDATA[iROW,0])+","+String(myDATA[iROW,iCH]);
								strDATA=strDATA2[0];
								//strDATA=String(myDATA[iROW,iCH]);
							}else{
//								strDATA+=String.fromCharCode(10)+String(myDATA[iROW,0])+","+String(myDATA[iROW,iCH]);
								strDATA+=String.fromCharCode(10)+strDATA2[0];
								//strDATA+=String.fromCharCode(10)+String(myDATA[iROW,iCH]);
							}

						}else{
							strDATA += ","+ strDATA2[iCH+3];
						}
						
					}		
				}
				// check DATA 
				//alert("[0,0]:"+ String(myDATA[0,0])+"  "+"[rowMAX-1,chMAX-1]:" +String(myDATA[rowMAX-1,chMAX-1])); 
				
			}else{
				 // alert("!การนำเข้าข้อมูลผิดพลาด myDATA");
			}
			/*
			strDATA="";
			for(iROW=0;iROW<rowMAX;iROW++){
					for(iCH=1;iCH<3;iCH++){
						if(iCH==1){
							if(iROW==0){
								//strDATA=String(myDATA[iROW,0])+","+String(myDATA[iROW,iCH]);
								strDATA=String(iROW)+","+String(myDATA[iROW,iCH]);
								//strDATA=String(myDATA[iROW,iCH]);
							}else{
//								strDATA+=String.fromCharCode(10)+String(myDATA[iROW,0])+","+String(myDATA[iROW,iCH]);
								strDATA+=String.fromCharCode(10)+String(iROW)+","+String(myDATA[iROW,iCH]);
								//strDATA+=String.fromCharCode(10)+String(myDATA[iROW,iCH]);
							}
						}else{
							strDATA +=","+ String(myDATA[iROW,iCH]);
						}
						//---debug---
						//alert(strDATA);
					}
			}
			*/
			strDATA ="Item,CH1,CH2" + String.fromCharCode(10)+strDATA;
		//alert(strDATA);
//		document.write(strDATA);
			//---debug---
			//alert("*** endif-01 ");
		    graph1=new Dygraph(document.getElementById("graphdiv"),strDATA,
			{	title:'Demo Graph,2CH',
				ylabel: 'Temperature (F)',
				legend: 'always',
				labelsDivStyles: { 'textAlign': 'right' }
			}
			);

			//return strDATA;	
		}   
	}
	xmlhttp.open("GET","getdata.php",true);
	xmlhttp.send();
	
}
</script>

</head>

<body>
<p>Display - &gt; Realtime</p>
<p align="center"><a href="mainmenu.php">Back</a></p>
<table width="800" border="0">
  <tr>
    <td>Select a set of responses for monitoring </td>
    <td>Time Unit</td>
    <td>Response</td>
  </tr>
  <tr>
    <td width="400"><select name="set_responses" id="set_responses">
      <option selected="selected">Temp and Displacement</option>
      <option>...</option>
      <option>...</option>
      <option>...</option>
    </select></td>
    <td width="159"><select name="within" id="within">
      <option selected="selected">1 Min</option>
      <option>1 Hour</option>
</select></td>
    <td width="161"><select name="response" id="response">
      <option selected="selected">Value</option>
      <option>Level</option>
    </select></td>
  </tr>
</table>

<div id="graphdiv" style="width: 800px; height: 300px;">
	<script >
		var myVar=setInterval(function(){getsock()},1000);
	</script>
</div>


Graph2
<div id="graphdiv2" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g2 = new Dygraph(
    document.getElementById("graphdiv2"), "realtime-graph2.csv", // path to CSV file
	{
	  'DM1': {
		plotter: Dygraph.Plotters.linePlotter, // plot àÊé¹
		strokePattern: Dygraph.DASHED_LINE // àÊé¹»Ð
	  },
	  'DM2': {
		plotter: Dygraph.Plotters.linePlotter,
		strokePattern: Dygraph.DASHED_LINE
	  },
	  'DM3': {
		plotter: Dygraph.Plotters.linePlotter,
		strokePattern: Dygraph.DASHED_LINE
	  },
	  colors: ["green","blue","red"]  // ¡ÓË¹´ä´éËÅÒÂáºº "rgb(51,204,204)","#00DD55" 
	});  
  </script>
  Graph3
<div id="graphdiv3" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv3"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 1,showRoller: false}          // options
  );
</script>
Graph4
<div id="graphdiv4" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv4"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 15,showRoller: false}          // options
  );
</script>
Graph5
<div id="graphdiv5" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv5"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 35,showRoller: false}          // options
  );
</script>
Graph6
<div id="graphdiv6" style="width: 800px; height: 150px;"></div>
<script type="text/javascript">
  g1 = new Dygraph(
    document.getElementById("graphdiv6"), "realtime-graph1.csv", // path to CSV file
    {rollPeriod: 25,showRoller: false}          // options
  );
</script>

</body>
</html>
